Bootstrap 4: Conheça a biblioteca front-end mais utilizada no mundo
By Natan Souza
5/5
()
About this ebook
Neste livro, Natan Souza ensinará como trabalhar com esta fantástica biblioteca em sua última versão 4 ao montar uma página do zero, a partir de um wireframe. Você verá seus principais componentes, como menu responsivo, grids, painéis e botões, além de aprender a customizar seu tema padrão e algumas boas práticas de HTML5, sempre levando em consideração a semântica do código.
Versões utilizadas: Bootstrap 4
Related to Bootstrap 4
Related ebooks
Guia Front-End: O caminho das pedras para ser um dev Front-End Rating: 5 out of 5 stars5/5ECMAScript 6: Entre de cabeça no futuro do JavaScript Rating: 5 out of 5 stars5/5Sass: Aprendendo pré-processadores CSS Rating: 0 out of 5 stars0 ratingsO retorno do cangaceiro JavaScript: De padrões a uma abordagem funcional Rating: 0 out of 5 stars0 ratingsPHP e Laravel: Crie aplicações web como um verdadeiro artesão Rating: 0 out of 5 stars0 ratingsCSS Eficiente: Técnicas e ferramentas que fazem a diferença nos seus estilos Rating: 0 out of 5 stars0 ratingsConstruindo APIs REST com Node.js: Caio Ribeiro Pereira Rating: 5 out of 5 stars5/5Design Patterns com PHP 7: Desenvolva com as melhores soluções Rating: 5 out of 5 stars5/5Aplicações web real-time com Node.js Rating: 5 out of 5 stars5/5Vue.js: Construa aplicações incríveis Rating: 0 out of 5 stars0 ratingsFront-end com Vue.js: Da teoria à prática sem complicações Rating: 5 out of 5 stars5/5Coletânea Front-end: Uma antologia da comunidade front-end brasileira Rating: 0 out of 5 stars0 ratingsDesenvolvimento web com PHP e MySQL Rating: 3 out of 5 stars3/5Primeiros passos com Node.js Rating: 0 out of 5 stars0 ratingsJava 9: Interativo, reativo e modularizado Rating: 0 out of 5 stars0 ratingsDesconstruindo a Web: As tecnologias por trás de uma requisição Rating: 0 out of 5 stars0 ratingsJavaScript Assertivo: Testes e qualidade de código em todas as camadas da aplicação Rating: 0 out of 5 stars0 ratingsAPIs REST: Seus serviços prontos para o mundo real Rating: 5 out of 5 stars5/5MySQL: Comece com o principal banco de dados open source do mercado Rating: 4 out of 5 stars4/5Turbine seu CSS: Folhas de estilo inteligentes com Sass Rating: 0 out of 5 stars0 ratingsHTML5 e CSS3: Domine a web do futuro Rating: 4 out of 5 stars4/5Do PHP ao Laminas: Domine as boas práticas Rating: 3 out of 5 stars3/5Guia prático de TypeScript: Melhore suas aplicações JavaScript Rating: 0 out of 5 stars0 ratingsProgramação funcional em .NET: Explore um novo universo Rating: 0 out of 5 stars0 ratingsProgressive Web Apps: Construa aplicações progressivas com React Rating: 3 out of 5 stars3/5Programação Funcional: Uma introdução em Clojure Rating: 4 out of 5 stars4/5Desenvolvimento web com ASP.NET MVC Rating: 0 out of 5 stars0 ratingsPostgreSQL: Banco de dados para aplicações web modernas Rating: 5 out of 5 stars5/5ASP.NET Core MVC: Aplicações modernas em conjunto com o Entity Framework Rating: 5 out of 5 stars5/5GraphQL: A revolucionária linguagem de consulta e manipulação de dados para APIs Rating: 0 out of 5 stars0 ratings
Internet & Web For You
Introdução e boas práticas em UX Design Rating: 5 out of 5 stars5/5HTML5 e CSS3: Domine a web do futuro Rating: 4 out of 5 stars4/5Liberdade digital: O mais completo manual para empreender na internet e ter resultados Rating: 5 out of 5 stars5/5Fundamentos de Segurança da Informação: com base na ISO 27001 e na ISO 27002 Rating: 5 out of 5 stars5/5Construindo APIs REST com Node.js: Caio Ribeiro Pereira Rating: 5 out of 5 stars5/5Como ganhar dinheiro com aplicativos Rating: 3 out of 5 stars3/573 Incríveis tipos de postagens de blog que você pode escrever hoje Rating: 2 out of 5 stars2/5Desconstruindo a Web: As tecnologias por trás de uma requisição Rating: 0 out of 5 stars0 ratingsDeep Web: Todos os segredos e mistérios da rede por trás da rede Rating: 0 out of 5 stars0 ratingsSua Empresa na Internet Rating: 5 out of 5 stars5/5Roadmap back-end: Conhecendo o protocolo HTTP e arquiteturas REST Rating: 5 out of 5 stars5/5CSS Eficiente: Técnicas e ferramentas que fazem a diferença nos seus estilos Rating: 0 out of 5 stars0 ratingsAPP para iniciantes: Faça seu primeiro aplicativo Low Code Rating: 0 out of 5 stars0 ratingsBriefing: a gestão do projeto de design Rating: 0 out of 5 stars0 ratingsAmazon AWS: Descomplicando a computação na nuvem Rating: 5 out of 5 stars5/5Tudo Sobre A Tecnologia Blockchain: O Guia Mais Completo Para Iniciantes Sobre Carteira Blockchain, Bitcoin, Ethereum, Ripple, Dash Rating: 0 out of 5 stars0 ratingsInteligência Digital Rating: 5 out of 5 stars5/5Programação Web avançada com PHP: Construindo software com componentes Rating: 0 out of 5 stars0 ratingsCrimes cibernéticos: ameaças e procedimentos de investigação - 2ª Edição Rating: 5 out of 5 stars5/5Marketing: Guia Para Iniciantes De Como Ganhar Dinheiro On-Line Com As Redes Sociais Para Pequenos Negócios Rating: 1 out of 5 stars1/5Spring Boot: Acelere o desenvolvimento de microsserviços Rating: 0 out of 5 stars0 ratingsConstruindo um Blog de sucesso com o WordPress 3 Rating: 0 out of 5 stars0 ratingsProgramação funcional em .NET: Explore um novo universo Rating: 0 out of 5 stars0 ratingsManual do social media: Os 7 segredos para o sucesso nas mídias sociais para pequenas empresas Rating: 0 out of 5 stars0 ratingsSEO Prático: Seu site na primeira página das buscas Rating: 0 out of 5 stars0 ratingsCibersegurança: Visão Panorâmica Sobre a Segurança da Informação na Internet Rating: 0 out of 5 stars0 ratingsA Web Mobile: Design Responsivo e além para uma Web adaptada ao mundo mobile Rating: 0 out of 5 stars0 ratingsPrimeiros passos com Node.js Rating: 0 out of 5 stars0 ratingsBig Data para Executivos e Profissionais de Mercado - Terceira Edição: Big Data Rating: 0 out of 5 stars0 ratings
Reviews for Bootstrap 4
4 ratings0 reviews
Book preview
Bootstrap 4 - Natan Souza
Sumário
1. O projeto Better
2. Destacando o que deve ser destacado
3. Entendendo as grids do Bootstrap
4. Flexbox, agora no Bootstrap
5. Media, um componente atualizado
6. Cartas na mesa: brincando com o card
7. Classes semânticas e CSS mais leve
8. Conselhos e dicas
Capítulo 1
O projeto Better
Neste livro, criaremos juntos um projeto do começo ao fim usando o Bootstrap 4 e seus principais componentes, como menu responsivo, grids, painéis etc. Além de customizar o tema padrão, usaremos boas práticas de HTML5 levando em consideração a semântica do nosso código e teremos a performance do projeto como um ponto a ser pensado.
Nosso cliente, Vasco Nakombi, possui um projeto chamado Better, um banco de imagens pago, no qual o usuário pode baixar determinadas fotos de graça, mas precisa pagar por outras. No briefing minimalista passado por Vasco, foi determinado que rápido e responsivo
devem ser os pilares para toda decisão que envolva o desenvolvimento da plataforma, logo, já foi descartado fazer pesquisa de público-alvo ou mesmo qualquer dinâmica de UX.
Além disso, o wireframe já foi aprovado e devemos segui-lo fielmente. Precisamos de algo que seja rápido e fácil de usar.
Wireframe Home BetterFigura 1.1: Wireframe Home Better
Você pode acessar esse wireframe nesse link: https://github.com/designernatan/livro-bootstrap4/blob/master/wireframe-home.png
Além da home, por solicitação do cliente, precisaremos criar a página de cadastro e a página de login. A Better ainda não possui um site funcional com HTML/CSS, e o designer responsável por fazer a parte da criação foi demitido. Como podemos proceder, sendo que, na equipe, temos apenas programadores back-end com conhecimento básico de front-end? E quanto ao design? Talvez, a saída seja fazer um curso online na Alura, ou ler um livro de front-end da Casa do Código.
Porém, qual era um dos itens primordiais para o cliente? Tempo! Assim, não temos tempo nem budget para instruir os programadores. Eis que surge a cavalaria: o Bootstrap.
Como dito na introdução deste livro, o Bootstrap é um framework CSS repleto de componentes prontos e reutilizáveis. Podemos usá-lo para ganhar tempo e deixar os programadores focados em programar de fato.
Framework ou biblioteca?
Primeira curiosidade: em suas versões alpha e beta, o Bootstrap 4 considerava-se um framework. Já na sua versão final, o termo escolhido mudou para biblioteca.
Há diversas discussões na internet com argumentos realmente fascinantes, mas não me prenderei muito a terminologias aqui, pois, se o próprio Bootstrap mudou a forma de se chamar, quem sou eu para argumentar algo contra?
Primeiramente, teremos de preparar nosso ambiente de desenvolvimento. Acredito que você, leitor, provavelmente possua uma IDE preferida; eu usarei o Sublime Text, mas sinta-se à vontade para usar o seu editor de texto do coração, seja Brackets, Atom, Visual Studio Code, VIM etc.
No link a seguir, baixe os arquivos do projeto (30 MB) que usaremos no decorrer do seu desenvolvimento e descompacte todo o seu conteúdo em alguma pasta, seja no Desktop ou em uma pasta do seu Dropbox, por exemplo: https://github.com/designernatan/livro-bootstrap4.
Outras pastas
No mesmo repositório, você poderá encontrar os projetos finais de cada capítulo, devidamente identificados.
Agora pegue a pasta projeto-better e abra-a em seu editor de texto. Depois, abra o arquivo index.html para começarmos a editar seu código. Perceba que o que já consta no arquivo é a estrutura básica de um HTML:
pt-br>
UTF-8>
viewport content=width=device-width
>
Onde baixo o Bootstrap?
Se você quiser baixar o Bootstrap 4 (e até versões anteriores), basta acessar seu site principal, que também contém toda a sua documentação: https://getbootstrap.com/.
Quando vamos fazer uma redação, normalmente começamos, bem... Do começo. Logo, faremos o mesmo com o projeto, começando do topo. Vamos partir da estrutura básica do menu de navegação:
Wireframe do menu de navegaçãoFigura 1.2: Wireframe do menu de navegação
Um menu de navegação desse tipo consiste basicamente em uma lista não ordenada com vários itens de lista, sendo cada um deles um link. Vamos fazer o código dentro do desta forma:
Não se preocupe com as URLs dos links, vamos alterá-las em capítulos posteriores. Abrindo a página no browser, não teremos nada muito bonito:
Menu sem estiloFigura 1.3: Menu sem estilo
Poderíamos criar regras CSS para estilizar esse menu e colocar um display: inline nessas
stylesheet href=/css/bootstrap.css
>
Feito isso, abrindo no browser:
Menu com Bootstrap importadoFigura 1.4: Menu com Bootstrap importado
Repare que, mesmo sem mudar nenhum elemento de estrutura nem colocar nenhum tipo de classe, o resultado final ficou diferente. Os links estão com um tom de azul mais tênue, e até mesmo a tipografia foi alterada, além dos espaçamentos que foram modificados.
Mas como aproximar ainda mais do resultado esperado? Como deixar o menu na horizontal conforme o wireframe passado usando o Bootstrap? Talvez, possamos usar um elemento do HTML5 que traga mais semântica? Vamos tentar isso com o elemento
Testando no browser, nada muda. Isso se deve ao fato de que o mais semântica. Perceba que a semântica do código depende unicamente do desenvolvedor que está codando, e não do framework. Agora como será que o Bootstrap trata menus?
Esse fantástico framework possui classes específicas para fazer menu de navegação, como também componentes prontos que nos auxiliam nessa tarefa. Um desses componentes é o chamado navbar. Mas como utilizá-lo? Precisaremos aprender alguma linguagem back-end, como Java ou PHP?
Nada disso! Vamos relembrar que o Bootstrap é basicamente um CSS, logo, para usarmos seus componentes prontos, basta sabermos os nomes das classes que ele possui e aplicá-las em nosso HTML.
Como saber o nome dessas classes? Basta abrir o arquivo bootstrap.css, localizado na pasta css, e procurar nas mais de seis mil linhas de código. Será que não existe algum